<template>
  <div class="bigBox">
    <el-card :bordered="false" class="card-area">
      <!-- 表格区域 -->
      <div>
        <el-row>
          <el-col :span="1"><el-button size="small" type="primary" @click="handleAdd">
            新建
          </el-button>
          </el-col>
          <el-col :span="4">
            <btnFile :type="4" :parameter="{parentId: parentId}" @success="upFileSuccess" />
          </el-col>
        </el-row>
        <!--面包屑-->
        <el-breadcrumb style="cursor: pointer; margin: 20px 0; color: #4a9ff5; font-size: 14px">
          <el-breadcrumb-item><span @click="onClick(0,-1)">当前位置：>>首页</span></el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in Breadcrumb" :key="item.key"><span @click="onClick(item, index)">{{ item.title }}</span></el-breadcrumb-item>
        </el-breadcrumb>
        <hr>
      </div>
      <!-- 文件区域   -->
      <div ref="sildtree" class="floot">
        <div v-for="(item,index) in arr" :key="index" class="Share" @click.right="rightClick(item, $event)">
          <!--     文件夹显示   -->
          <div v-if="item.mark === 1" class="bgColor" style="position: relative">
            <!--     无子集文件夹显示     -->
            <a v-if="!item.hasChildren" href="#" @dblclick="ClickShare(item)">
              <img :src="fileTP">
              <p :title="`创建时间： ${item.createTime}\n创建人：    ${item.fromUser}`" style="text-align: center;color: #000c17; font-size: 14px">{{ item.fileName }}</p>
            </a>
            <!--     有子集文件夹显示     -->
            <a v-else href="#" @dblclick="ClickShare(item)">
              <img style="width: 55px;height: 52px;margin-top: 7px;" :src="fileTP_active">
              <p :title="`创建时间： ${item.createTime}\n创建人：    ${item.fromUser}`" style="margin-top: 9px;text-align: center;color: #000c17;font-size: 14px">{{ item.fileName }}</p>
            </a>
          </div>
          <!--     文件显示   -->
          <div v-else class="bgColor" style="padding-top: 13px;position: relative">
            <a href="#" @dblclick="ClickShare(item)">
              <img v-if="item.src" style="width: 84px; height:55px;" :src="item.src">
              <img v-else style="width: 55px;height: 52px;" :src="item.ico">
              <p :title="`创建时间： ${item.createTime} \n 创建人：${item.fromUser}`" class="textHiddn" style="margin-top: 4px;text-align: center;color: #000c17; font-size: 14px">{{ item.fileName }}</p>
            </a>
          </div>
        </div>
        <!--    空文件提示    -->
        <div v-if="NullText" style="font-size: 16px; text-align: center;margin: 145px auto">
          <el-empty />
        </div>
        <!--    右键    -->
        <ul v-if="isshow" ref="actions" class="deptclass" :style="acStyle">
          <li class="flag" @click="getShareClick">
            <el-row>
              <el-col :span="5"><i class="el-icon-plus" style="color: #003399" /></el-col>
              <el-col :span="19">打开</el-col>
            </el-row>
          </li>
          <li v-if="downloads" class="flag" @click="DpwnFile">
            <el-row>
              <el-col :span="5"><i class="el-icon-bottom" style="color: #003399" /></el-col>
              <el-col :span="19">下载</el-col>
            </el-row>
          </li>
          <li v-if="EditFile" class="flag" @click="EditShare">
            <el-row>
              <el-col :span="5"><i class="el-icon-edit" style="color: #003399" /></el-col>
              <el-col :span="19">重命名</el-col>
            </el-row>
          </li>
          <li class="flag" @click="handleDliele">
            <el-row>
              <el-col :span="5"><i class="el-icon-delete" style="color: #003399" /></el-col>
              <el-col :span="19">删除</el-col>
            </el-row>
          </li>
        </ul>
      </div>
      <!-- 新建 -->
      <my-content-add
        ref="collectionForm"
        :visible="SharedisShow"
        :parent-id="parentId"
        @cancel="handleCancel"
        @create="handleCreate"
      />
      <!-- 修改 -->
      <my-content-edit
        ref="edit"
        :visible="ShareEdisShow"
        @cancel="handleEditCancel"
        @create="handleEditCreate"
      />
    </el-card>
  </div>
</template>
<script>
import MyContentAdd from './MyContentAdd'
import MyContentEdit from './MyContentEdit'
import btnFile from '../common/btnFile'
import axios from 'axios'
// 文件ico
import defaultImg from '@/assets/img/file/default.png'
import exe from '@/assets/img/file/exe.jpg'
import pdf from '@/assets/img/file/pdf.jpg'
import shiping from '@/assets/img/file/shiping.jpg'
import text from '@/assets/img/file/text.jpg'
import word from '@/assets/img/file/word.jpg'
import xls from '@/assets/img/file/xls.jpg'
import zip from '@/assets/img/file/zip.jpg'
import yingping from '@/assets/img/file/yingping.jpg'
import db from '@/utils/localstorage'
export default {
  name: 'Myminddle',
  components: { MyContentAdd, MyContentEdit, btnFile },
  data() {
    return {
      Breadcrumb: [],
      fileTP: require('@/assets/img/file/share.png'),
      fileTP_active: require('@/assets/img/file/share_active.png'),
      SharedisShow: false,
      ShareEdisShow: false,
      NullText: false,
      // 上传
      // 导入
      action: '/file',
      headers: {
        // Authentication: this.$store.state.account.token
      },
      // 右键的显示隐藏
      isshow: false,
      downloads: false,
      EditFile: true,
      // 当前实例
      current: {},
      parentId: '0',
      acStyle: {},
      arr: []
    }
  },
  mounted() {
    this.getFach({ parentId: '0' })
    document.addEventListener('click', e => {
      // 鼠标点击任意非打开框的位置，隐藏操作
      if (e.target.className !== 'flag') {
        this.isshow = false
      }
    })
  },
  methods: {
    // 右键模态框
    rightClick(item, event) {
      // 根据文件类型不同显示不同的右键菜单
      if (item.filePath) {
        // 下载
        this.downloads = true
        // 重命名
        this.EditFile = false
      } else {
        this.downloads = false
        this.EditFile = true
      }
      event.preventDefault()
      this.isshow = true
      const x0 = event.clientX
      const y0 = event.clientY
      const elem = this.$refs.sildtree
      const x1 = elem.offsetParent.offsetLeft
      const y1 = elem.offsetTop
      const left = x0 - x1
      const top = y0 - y1 + 30
      this.acStyle = { left: left + 'px', top: top + 'px' }
      this.current = item
    },
    // 标题
    onClick(key, index) {
      // 当点击首页时 数组为空 渲染页面
      if (index === -1) {
        this.getFach({ parentId: '0' })
        this.parentId = '0'
        this.Breadcrumb = []
      } else {
        // 当数组不为首页时，根据id渲染数组，存储当前对象到parentId，然后根据下标截取数组
        this.parentId = key.id
        this.getFach({ parentId: key.id })
        this.Breadcrumb = this.Breadcrumb.slice(0, index + 1)
      }
    },
    // 右键打开
    getShareClick() {
      this.ClickShare(this.current)
      this.isshow = false
    },
    // 点击文件
    ClickShare(item) {
      if (item.mark === 1) {
        this.Breadcrumb.push({ title: item.fileName, id: item._id })
        this.parentId = item._id
        this.getFach({ parentId: this.parentId })
      }
    },
    // 点击请求
    getFach(newD) {
      this.NullText = false
      this.$get('/fileadmin/parenList', newD).then(res => {
        console.log('1', res)
        if (res.data.data.length > 0) {
          this.NullText = false
          this.arr = res.data.data
          this.arr.forEach(t => {
            // 判断是文件
            if (t.mark === 2) {
              // 文件
              const item = t.fileName.split('.')[1]
              const fileUrl = this.$baseURL + '/' + t.filePath
              switch (item) {
                case 'pdf': t.ico = pdf
                  break
                case 'png': t.src = fileUrl
                  break
                case 'gif': t.src = fileUrl
                  break
                case 'jpg': t.src = fileUrl
                  break
                case 'xls': t.ico = xls
                  break
                case 'xlsx': t.ico = xls
                  break
                case 'txt': t.ico = text
                  break
                case 'zip': t.ico = zip
                  break
                case 'mp3': t.ico = yingping
                  break
                case 'mp4': t.ico = shiping
                  break
                case 'exe': t.ico = exe
                  break
                case 'doc': t.ico = word
                  break
                case 'docx': t.ico = word
                  break
                default: t.ico = defaultImg
              }
            }
          })
        } else {
          this.arr = res.data.data
          this.NullText = true
        }
      })
    },
    // 修改文件名
    EditShare() {
      this.$refs.edit.getName(this.current)
      this.isshow = false
      this.ShareEdisShow = true
    },
    handleEditCreate() {
      this.ShareEdisShow = false
      this.getFach({ parentId: this.parentId })
      this.$message.success('操作成功')
    },
    handleEditCancel() {
      this.ShareEdisShow = false
    },
    // 删除文件名
    handleDliele() {
      const that = this
      that.isshow = false
      that.$confirm('此操作将永久删除该文件, 是否继续?', '提示').then(() => {
        that.$delete('/fileadmin/delete', { id: that.current._id }).then(() => {
          that.$message.success('操作成功！')
          that.getFach({ parentId: that.parentId })
        })
      })
    },
    //  新建文件夹
    handleAdd() {
      this.SharedisShow = true
    },
    // close
    handleCancel() {
      this.SharedisShow = false
    },
    // success
    handleCreate() {
      this.SharedisShow = false
      this.getFach({ parentId: this.parentId })
      this.$message.success('操作成功')
    },
    // 下载
    DpwnFile() {
      axios({
        method: 'get',
        url: this.$baseURL + '/file/download',
        headers: {
          'Authorization': 'Bearer ' + db.get('TOKEN')
        },
        params: {
          path: this.current.filePath
        },
        responseType: 'blob'
      }).then(res => {
        const content = res.data
        const blob = new Blob([content])
        if ('download' in document.createElement('a')) {
          const link = document.createElement('a')
          link.download = this.current.fileName
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click()
          URL.revokeObjectURL(link.href)
          document.body.removeChild(link)
        } else {
          navigator.msSaveBlob(blob, this.current.fileName)
        }
        this.$message.success({
          message: '系统提示',
          description: '文件下载成功！',
          duration: 4
        })
      }).catch(err => {
        console.error(err)
        this.$message.error('文件传输失败！')
      })
    },
    upFileSuccess() {
      this.getFach({ parentId: this.parentId })
    }
  }
}
</script>

<style scoped>
    .floot {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        min-height: 600px;
    }
    a {
        text-decoration: none;
    }
    .Share {
        width: 110px;
        height: 130px;
        padding: 8px 1px;
        margin-left: 3px;
    }
    .Share a {
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
    }
    .bgColor:hover {
        width: 100%;
        background-color: #E5F3FF;
    }
    .Share a img{
        width: 70px;
        height: 70px;
    }
    .deptclass {
        width: 117px;
        height: auto;
        list-style-type: none;
        padding: 5px 0;
        position: absolute;
        font-size: 14px;
        color: #666;
        z-index: 999999;
        box-shadow: 0 2px 4px rgb(0 0 0);
        border: 1px solid #d2d2d2;
        background-color: white;
    }
    .deptclass li {
        margin: 0 5px;
        height: 35px;
        line-height: 35px;
        border-bottom: 1px dashed #ddd;
        cursor: pointer;
    }
    .deptclass li:hover {
        color: lightseagreen;
    }
</style>
